<script>
$(document).ready(function(){
	$("div#toogle-menu").click(function () {
		//jQuery(hbox_class).html("More");
		//console.log($(this).context.firstChild.className);
		var hbox_id = "#"+$(this).context.firstChild.className;
		var hbox_class = "."+$(this).context.firstChild.className;
		//alert(hbox_id);
		if($(hbox_class).html()=="[ - ]"){
			$(hbox_id).slideUp('fast');
			$(hbox_class).html("[ + ]");
		}else{
			$(hbox_id).slideDown('fast');
			$(hbox_class).html("[ - ]");
		}
		/*
		$(hbox_id).slideDown('fast',function(data){
		  if($(hbox_class).html()=="[ - ]"){
		    $(hbox_class).html("[ + ]");
		  }else{
		    $(hbox_class).html("[ - ]");
		  }
		});
		*/
	});
});


</script>
<style type="text/css" media="screen">
	#toogle-menu{
		cursor:pointer;
	}
	#toogle-menu:hover{
		color:#00aeff;
	}
	.hbox{
		border-top:solid 1px #7b7b7b;border-right:solid 1px #7b7b7b;border-left:solid 1px #7b7b7b;
	}
	.t-container{
		border-bottom:solid 1px #7b7b7b;
		padding:5px 5px 5px 10px;
		color:#c2c2c2;
	}
	.store-item{
		border:solid 1px #7b7b7b;
		margin-right:10px;
	}
</style>
<div style="width:914px;margin:0 auto;" id="store">
	<div id="dark-div" style="float:left;width:526px;color:#7b7b7b">
		<h1 id="welcome_gamers" class="site-blue calibri_bold" style="font-size:19px">STORE</h1>
		<div class="clear-24"></div>
		<div>
			<div style="float:left;padding-top:10px" class="calibri">Sort by</div>
			<div class="sel-style" style="margin-left:20px">
				<select>
					<option value="default">Default</option>
				</select>
			</div>
			<div class="sel-style" style="margin-left:20px">
				<select >
					<option value="default">Default</option>
				</select>
			</div>
			<input type="text" style="margin-left:20px">
			
		</div>
		<div class="clear-15"></div>
		<div class="black-box" style="width:352px;float:left">
			&nbsp;
		</div>
		<div class="black-box" style="float:left;width:123px;margin-left:20px">
			&nbsp;
		</div>
		<div class="clear-15"></div>
		<div>
			<div id="toogle-menu"><label class="m1">[ + ]</label> Show all item groups</div>
			<div class="clear-15"></div>
			<div class="hbox" id="m1" style="display:none">
				<div class="t-container">
					<div style="float:left">
						<img class="store-item" src="<?php echo base_url() ?>images/store/item1.jpg" align="left" />
						<label class="site-blue">Mechano-Hog</label><br/>
						<label style="font-size:13px">Mechano-Hog</label>
					</div>
					<div style="float:right;padding-top:3px"><button class="css3button"><img src="<?php echo base_url() ?>images/store/vpicon.png" align="left"/>&nbsp;50 VP</button></div>
					<div class="clear"></div>
					
				</div>
			</div>
			<div class="clear-15"></div>
			<div id="toogle-menu"><label class="m2">[ - ]</label> Mounts</div>
			<div class="clear-15"></div>
			<div class="hbox" id="m2">
				<div class="t-container">
					<div style="float:left">
						<img class="store-item" src="<?php echo base_url() ?>images/store/item1.jpg" align="left" />
						<label class="site-blue">Mechano-Hog</label><br/>
						<label style="font-size:13px">Mechano-Hog</label>
					</div>
					<div style="float:right;padding-top:3px"><button class="css3button"><img src="<?php echo base_url() ?>images/store/vpicon.png" align="left"/>&nbsp;50 VP</button></div>
					<div class="clear"></div>
					
				</div>
				<div class="t-container">
					<div style="float:left">
						<img class="store-item" src="<?php echo base_url() ?>images/store/item1.jpg" align="left" />
						<label class="site-blue">Mechano-Hog</label><br/>
						<label style="font-size:13px">Mechano-Hog</label>
					</div>
					<div style="float:right;padding-top:3px"><button class="css3button"><img src="<?php echo base_url() ?>images/store/vpicon.png" align="left"/>&nbsp;50 VP</button></div>
					<div class="clear"></div>
					
				</div>
				<div class="t-container">
					<div style="float:left">
						<img class="store-item" src="<?php echo base_url() ?>images/store/item1.jpg" align="left" />
						<label class="site-blue">Mechano-Hog</label><br/>
						<label style="font-size:13px">Mechano-Hog</label>
					</div>
					<div style="float:right;padding-top:3px"><button class="css3button"><img src="<?php echo base_url() ?>images/store/vpicon.png" align="left"/>&nbsp;50 VP</button></div>
					<div class="clear"></div>
					
				</div>
				
			</div>
			<div class="clear-15"></div>
			<div id="toogle-menu"><label class="m3">[ + ]</label> Mounts</div>
			<div class="clear-15"></div>
			<div class="hbox" id="m3" style="display:none">
			</div>
			
		</div>
	</div>
	<div style="float:right;width:310px">
		
		<?php $this->load->view('global/right_pane'); ?>
		
	</div>
	<div class="clear"></div>
</div>